<template>
    <div class="chanel-container-box">
        <div class="chanelBox">
            <div class="title">渠道:</div>
            <div class="select-box">
                <scroll-view class="select-box-scroll" :scroll-x="true">
                    <div class="item" v-for="(item, index) in tabList" :class="{ actived: selected == index }"
                        @click="changeSelected(index)" :key="item.id">
                        {{ item.name }}
                    </div>
                </scroll-view>
            </div>
        </div>
        <div class="chanelBox" style="margin-top: 10px;">
            <div class="title">备选:</div>
            <div class="select-box">
                <scroll-view class="select-box-scroll" :scroll-x="true">
                    <div class="item" v-for="(item1, index) in resetChanelList"
                        :class="{ actived: resetSelected == index }" @click="changeResetSelected(index)"
                        :key="item1.id">
                        {{ item1.name }}
                    </div>
                </scroll-view>
            </div>
        </div>
        <div class="radio-container">
            <div v-if="selected == 0 || selected == 2 || selected == 5 || resetSelected == 0 || resetSelected == 2 || resetSelected == 5 "
                style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px;padding: 0 12px;">
                <div class="title">是否限价</div>
                <nut-switch v-model="val" @change="handleChange" active-color="#5232B7"> </nut-switch>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, toRefs, onMounted } from 'vue'
import Taro from "@tarojs/taro";
const selected = ref(1);
const resetSelected = ref(null)
const props = defineProps({
    tabList: Array,
    isLimitPrice: Boolean,
    resetChanelList: Array
})
const val = ref(true)
const bxVal = ref(true)
const emit = defineEmits(["onChange", "onRadioChange", "onBxChange", "onResetChange"])
const { tabList, isLimitPrice, resetChanelList } = toRefs(props);
//渠道切换
const changeSelected = (e) => {

    if (e == resetSelected.value) { // 检查是否与备选的选择不同  
        resetSelected.value = null
        emit("onResetChange", 0)
        selected.value = e;
        console.log(tabList.value[e], "tabList.value[e]");
        emit("onChange", tabList.value[e])
        return
    }
    selected.value = e;
    emit("onChange", tabList.value[e])
};
//选择折
const changeResetSelected = (e) => {
    if (e == selected.value) { // 检查是否与备选的选择不同  
        selected.value = null
        emit("onChange", 0)
        resetSelected.value = e;
        emit("onResetChange", resetChanelList.value[e])
        return
    }
    resetSelected.value = e;
    emit("onResetChange", resetChanelList.value[e])
}
//渠道选择
const handleChange = (e) => {
    // console.log(e);
    val.value = e
    emit("onRadioChange", val.value)
}
//备选渠道 选择
const handleBxChange = (e) => {
    bxVal.value = e
    emit("onBxChange", e)

}
</script>
<style lang="less">
.chanel-container-box {


    .chanelBox {
        display: flex;
        align-items: center;
        justify-content: space-around;

        // width: 100%;
        .title {
            flex: 1;
        }

        .select-box {
            display: flex;
            width: 10rem;
            // justify-content: space-around;
            // align-items: center;


            // flex-wrap: wrap;
            flex: 4;

            .select-box-scroll {
                width: 10rem;
                display: flex;
                flex: 1;

                .item {
                    // margin: 5px;
                    // width: 50px;
                    min-width: 90px;
                    // padding: 10px;
                    height: 40px;
                    line-height: 40px;
                    box-sizing: border-box;
                    background-color: #eee;
                    text-align: center;
                    font-size: 24px;
                    border-radius: 5px;
                }

                .item:nth-child(n+2) {
                    margin-left: 5px;
                    border-radius: 8px;
                }

                .actived {
                    background: linear-gradient(to right, #5232b7, #7237bc);
                    // color=""
                    opacity: 0.8;
                    color: #fff;
                }
            }


        }
    }

    .radio-container {
        margin-top: 20px;
        text-align: center;
        // padding: 0 20px;


    }

}
</style>